<template>
  <div class="box">
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <template #header>

        <PageTools>
          <template #left>
            <span>总记录数：{{ paging.total }}</span>
          </template>
          <div slot="right">
            <el-button type="warning" size="small" :loading="loadshow" @click="$router.push('/import')">导入excil</el-button>
            <el-button type="danger" size="small" @click="importFn">导出excil</el-button>
            <el-button
              v-show="showButton('p-em-add'
              )"
              type="primary"
              size="small"
              @click="show = true"
            >新增员工</el-button>
          </div>
        </PageTools>

      </template>
    </el-card>
    <div>
      <!-- table列表 -->
      <el-table border :data="userList">
        <el-table-column label="序号" type="index" />
        <el-table-column label="姓名" prop="username" />
        <el-table-column #default="{row}">
          <el-image :src="row.staffPhoto" fit="fill" :lazy="true" label="头像" @click="QrFn(row.staffPhoto)" />

        </el-table-column>
        <el-table-column label="工号" prop="workNumber" />
        <el-table-column label="聘用形式">
          <template #default="{row}">
            <span>{{ employmentRelationshipFn(row.formOfEmployment) }}</span>
          </template>
        </el-table-column>
        <el-table-column label="部门" prop="departmentName" />
        <el-table-column label="入职时间" prop="correctionTime" :sortable="true">
          <template #default="{row}">
            {{ $formap(row.correctionTime) }}
          </template>

        </el-table-column>
        <el-table-column label="操作" fixed="right" width="280">
          <template #default="{row}">
            <el-button type="text" size="small" @click="$router.push(`/employees/message/${row.id}`)">查看</el-button>
            <el-button type="text" size="small" @click="allocationFn(row.id)">分配角色</el-button>
            <el-button type="text" size="small" @click="delFn(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-row
        type="flex"
        justify="center"
        align="middle"
        style="height: 60px"
      >
        <el-pagination layout="prev, pager, next,sizes" :page-size="paging.size" :page-sizes="[2,5,10]" :total="paging.total" @current-change="currentChangeFn" @size-change="sizeChangeFn" />
      </el-row>
    </div>
    <AddEmployee :show="show" @close="show=false" />
    <!-- 二维码位置 -->
    <el-dialog
      title="二维码"
      :visible.sync="showPhoto"
      width="30%"
    >
      <canvas ref="myCanve" />
    </el-dialog>
    <AssignRole ref="AssignRole" :show-role-dialog.sync="showAllocation" />
  </div>
</template>

<script>
import AssignRole from './dra/assign-role.vue'
// 新增引入弹层
import AddEmployee from './dra/addemployee.vue'
// 引入枚举
import enumeration from '@/api/constant/employees'
import { getUserListAPI, delEmployeeAPI } from '@/api/employees'
import QrCode from 'qrcode'
// 转换后台返回数组的形式========================star
// const formOfEmployment = {
//   1: '正式',
//   4: '外包',
//   2: '非正式'
// }
// =====================================end
import { transformTdata } from '@/utils'
export default {
  components: {
    AddEmployee,
    AssignRole
  },
  data() {
    return {
      // 分配按钮弹层
      showAllocation: false,
      showPhoto: false,
      loadshow: false,
      show: false, // 控制新增弹层显隐
      // 储存枚举
      enumeration: enumeration,
      // 员工信息数组
      userList: [],
      // 分页组件信息
      paging: {
        total: 20, // 信息数
        size: 2, // 当前页显示信息数
        page: 1// 页码
      }

    }
  },
  created() {
    // 获取员工信息
    this.getUserListFn()
  },
  methods: {
    //
    allocationFn(id) {
      this.showAllocation = true
      this.$refs.AssignRole.getUserRoleListFn(id)
    },
    // 二维码弹层
    QrFn(url) {
      this.showPhoto = true
      console.log(url)
      this.$nextTick(() => { QrCode.toCanvas(this.$refs.myCanve, url) })
    },

    // 枚举雇佣关系方法

    employmentRelationshipFn(xx) {
      const map = {}
      this.enumeration.hireType.forEach((item) => {
        map[item.id] = item.value
      })
      return map[xx]
    },
    /**
     * 获取员工信息 total 总信息数, rows 员工信息列表
     */
    async getUserListFn() {
      const { total, rows } = await getUserListAPI(this.paging)
      this.paging.total = total
      this.userList = rows
    },
    // 页码数改变事件
    sizeChangeFn(size) {
      this.paging.size = size
      this.getUserListFn()
    },
    // 当前页码改变事件
    currentChangeFn(page) {
      this.paging.page = page
      this.getUserListFn()
    },
    sort(prop, order) {
      console.log(prop)
    },
    // 删除事件
    delFn(xx) {
      this.$confirm('确认删除吗').then(async() => {
        // 删除数据前页数
        const raw = Math.ceil(this.paging.total / this.paging.size)
        console.log('原', raw)
        await delEmployeeAPI(xx)
        // 删除数据后页数
        const raw2 = Math.ceil((this.paging.total - 1) / this.paging.size)
        console.log('现', raw2)
        if (raw > raw2) {
          this.paging.page--
          console.log(this.paging.page)
        }

        this.getUserListFn()
      }).catch(() => {

      })
    },
    // 导出excil方法
    importFn() {
      this.downloadLoading = true
      const maps = {
        '入职日期': 'timeOfEntry',
        '聘用形式': 'formOfEmployment',
        '手机号': 'mobile',
        '姓名': 'username',
        '转正日期': 'correctionTime',
        '工号': 'workNumber',
        '部门': 'departmentName'
      }
      const tHeader = Object.keys(maps)

      const data = transformTdata(this.userList, Object.values(maps))
      console.log(data)
      import('@/utils/Export2Excel').then(excel => {
        excel.export_json_to_excel({
          header: tHeader,
          data,
          filename: '我的文件',
          autoWidth: false,
          bookType: 'xlsx'
        })
        this.downloadLoading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
